{% extends 'template.html' %}
{% load static %}
{% block title %}
DIFFERENT-主页
{% endblock %}
{% block main %}
    <!--顶部图片-->
    <div class="m-bg-class_outer" style="width: 100%;height: 100%">
        <img src="{% static 'images/bg.jpg' %}" style="width: 100%;height: 100%" alt="" class="ui m-bg image">

        <div class="m-bg-class_cover" align="center" style="height: 100%">
            <div class="m-margin-top-maxx" align="center">
                <img class="ui circular image" align="center" src="{% static 'images/me.jpg' %}"
                     style="width: 150px;height: 150px;">
            </div>
            <div class="m-font-size-title-large" align="center">DIFFERENT</div>

            <div class="" align="center">
                <a href="#" class="ui tencent circular icon button"><i class="user icon"></i></a>
                <a href="#" class="ui wechat circular icon button"><i class="weixin icon"></i></a>
                <a href="#" class="ui qq circular icon button" data-content="316392836"
                   data-position="bottom center"><i class="qq icon"></i></a>
                <a href="https://github.com/ZhiW5217" target="_blank" class="ui github circular icon button"
                   data-content="点击跳转GitHub" data-position="bottom center"><i class="github icon"></i></a>
                <a href="https://blog.csdn.net/One_L_Star" target="_blank" class="ui csdn circular icon button"
                   data-content="点击跳转CSDN" data-position="bottom center"><i class="copyright outline icon"></i></a>
                <a href="#" class="ui email circular icon button" data-content="onestarlr@hotmail.com"
                   data-position="bottom center"><i class="envelope  icon"></i></a>
            </div>

            <div class="ui tencent-qr flowing popup transition hidden">
                <img src="{% static 'images/oneStar.jpg' %}" alt="" class="ui rounded image" style="width: 110px">
                <div align="center">公众号</div>
            </div>
            <div class="ui wechat-qr flowing popup transition hidden">
                <img src="{% static 'images/oneStarWechat.jpg' %}" alt="" class="ui rounded image" style="width: 110px">
                <div align="center">微信</div>
            </div>
            <div class="ui qq-qr flowing popup transition hidden">
                <img src="{% static 'images/qq.jpg' %}" alt="" class="ui rounded image" style="width: 110px">
                <div align="center">QQ</div>
            </div>

            <h3 class="m-font-size-text" align="center">生活本身就是一场场战役，而且更比史诗渊源流长。</h3>
            <hr style="width: 50%">
            <h5 class="m-font-size-text-init-title m-margin-top-large">“大圣，此去欲何?”</h5>
            <h5 class="m-font-size-text-init-title">“踏南天，碎凌霄”</h5>
            <h5 class="m-font-size-text-init-title">“若一去不回……”</h5>
            <h5 class="m-font-size-text-init-title">“便一去不回”</h5>
            <div id="waypoint" class="ui m-margin-top-large" align="center">
                <a href="index.html"
                   class="ui circular icon button m-opacity-small m-item item m-mobile-hide m-index-btn"><i
                        class="home icon"></i>首页</a>
                <a href="types.html"
                   class="ui circular icon button m-opacity-small m-item item m-mobile-hide m-index-btn"><i
                        class="clone outline icon"></i>分类</a>
                <a href="#" class="ui circular icon button m-opacity-small m-item item m-mobile-hide m-index-btn"><i
                        class="clock icon"></i>时间轴</a>
                <a href="#" class="ui circular icon button m-opacity-small m-item item m-mobile-hide m-index-btn"><i
                        class="music icon"></i>音乐盒</a>
                <a href="#" class="ui circular icon button m-opacity-small m-item item m-mobile-hide m-index-btn"><i
                        class="book icon"></i>留言板</a>
                <a href="#" class="ui circular icon button m-opacity-small m-item item m-mobile-hide m-index-btn"><i
                        class="pencil alternate icon"></i>友人帐</a>
                <a href="#" class="ui circular icon button m-opacity-small m-item item m-mobile-hide m-index-btn"><i
                        class="image icon"></i>照片墙</a>
                <a href="#" class="ui circular icon button m-opacity-small m-item item m-mobile-hide m-index-btn"><i
                        class="info icon"></i>关于我</a>
            </div>
            <div class="hiddenDiv"></div>
        </div>
    </div>

    <!--最新推荐-->
    <div class="ui m-padded-tb-large">
        <div class="ui m-container-small m-opacity">
            <div class="ui secondary segment " align="center">
                <i class="bookmark icon"></i>最新推荐
            </div>
        </div>
        <div class="ui stackable m-container-mini m-opacity grid">
            <div class="m-margin-tb-tiny four wide column">
                <a href="#" class="class_outer" target="_blank">
                    <img src="{% static 'images/backimg1.jpg' %}" alt="" class="ui rounded image">
                    <span class="class_cover">
							<h4 class="m-font-size-blog-text m-margin-tb-tiny">大圣，此去欲何?</h4>
						</span>
                </a>
            </div>
        </div>
    </div>


    <!--中间内容-->
    <div class="m-padded-tb-big animated fadeIn">
        <div class="ui container">
            <div class="ui stackable grid">
                <!--博客内容-->
                <div class="ui vertical segment">
                    <div class="ui m-container-small m-opacity">
                        <div class="ui secondary segment " align="center">
                            <i class="bookmark icon"></i>最新文章
                        </div>
                    </div>
                    <!--博文列表-->
                    <div class="ui padded segment m-padded-tb-large m-opacity">
                        <div class="ui large aligned mobile reversed stackable grid">
                            <!--博文信息-->
                            <div class="eleven wide column ">
                                <h3 class="ui header"><a href="#" target="_blank" class="m-black">大圣，此去欲何?</a></h3>
                                <p class="m-text m-margin-top-max">
                                    戴上金箍，没法爱你；放下金箍，没法保护你。我知道上天不会给我第二次机会，曾经我们说好的永远，原来也仅仅只有，十二画，而已。“大圣，此去欲何?”“踏南天，碎凌霄。”“若一去不回……”“便一去不回”
                                    其实很多时候，我们都是有机会的，最后真正放弃的，是我们自己。......</p>
                                <div class="ui m-margin-top-max grid">
                                    <div class="eleven wide column">
                                        <div class="ui mini horizontal link list">
                                            <div class="item">
                                                <img src="{% static 'images/me.jpg' %}" alt="" class="ui avatar image">
                                                <div class="content"><a href="#" target="_blank"
                                                                        class="header">oneStar</a></div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon"></i><span>2020-01-01</span>
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i> <span>2222</span>
                                            </div>
                                            <div class="item">
                                                <i class="comment outline icon"></i> <span>2222</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="right aligned five wide column">
                                        <a href="#" target="_blank"
                                           class="ui teal basic label m-padded-tiny m-text-thin">好文</a>
                                    </div>
                                </div>
                            </div>
                            <!--博文图片-->
                            <div class="five wide column">
                                <a href="#" target="_blank">
                                    <img src="{% static 'images/backimg1.jpg' %}" alt="" class="ui rounded image">
                                </a>
                            </div>

                        </div>
                    </div>
                </div>
                <!--分页-->
                <div class="ui bottom attached segment m-opacity stackable grid">
                    <div class="three wide column" align="center">
                        <a class="item">上一页</a>
                    </div>

                    <div class="ten wide column" align="center">
                        <p><span></span> / <span></span></p>
                    </div>

                    <div class="three wide column" align="center">
                        <a class="item">下一页</a>
                    </div>
                </div>

            </div>
        </div>

    </div>


    <!--置顶图标-->
    <div class="m-padded-tb-large m-fixed m-right-bottom">
        <a href="#" class="ui icon button"><i class="chevron up icon"></i> </a>
    </div>


    <br>
    <br>
    <br>
{% endblock %}

{% block script %}
    <script>
        $('.menu.toggle').click(function () {
            $('.m-item').toggleClass('m-mobile-show');

        });

        // 显示公众号
        $('.tencent').popup({
            popup: $('.tencent-qr'),
            position: 'bottom center'
        });

        // 显示微信
        $('.wechat').popup({
            popup: $('.wechat-qr'),
            position: 'bottom center'
        });

        // 显示QQ
        $('.qq').popup({
            popup: $('.qq-qr'),
            position: 'bottom center'
        });

        // 显示邮箱
        $('.email').popup();
        // 显示CSDN
        $('.csdn').popup();

        // 显示github
        $('.github').popup();

        // 导航栏显示
        let waypoint = new Waypoint({
            element: document.getElementById('waypoint'),
            handler: function (direction) {
                if (direction === 'down') {
                    $('#nav').show(500);
                } else {
                    $('#nav').hide(500);
                }
                console.log('Scrolled to waypoint!  ' + direction);
            }
        })
    </script>
{% endblock %}